{include file='public/header' /}
<style>
    .edui-dialog-image-body{
        height: 220px!important;
        overflow: hidden;
    }
    .edui-dialog-image .edui-image-wrapper{
        box-sizing: border-box;
        height: 100%;
    }
    .edui-tab-nav{
        height:43px;
    }
    .edui-dialog-image .edui-image-content {
        height: 200px!important;
    }
    .work{
        width:300px;
        margin-top: 10px
    }
    .work1{
        width:100px;
        margin-top: 10px
    }

</style>
<style>
    #demo2{
        display: flex;
        align-items: center;
    }
    #demo2 li .operate{ color: #000; display: none;}
    #demo2 li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;}
    #demo2 li:hover .operate{ display: block;}
    .operate{
        position: absolute;
        right: 0;
        top: -9px;
        color: black;
        font-size: 34px;
        /* border: 1px solid red; */
        font-weight: bold;
    }
    .item_img{
        position: relative;margin-right: 10px;
    }
    .attribute{
        width: 90%;
        border: 1px solid #e6e6e6;
        margin-top:20px;
    }
    .atr{
        height: 50px;
        border: 1px solid #e6e6e6;
    }
    .ath{
        width: 100px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6;
    }
    .sl{
        width: 180px;
        margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
        display: block;
        white-space: nowrap;
    }
    .atd{
        display: flex;
        text-align: center;
        height: 38px;
        justify-content: center;
        align-items: center;
    }
    table input{
        text-align: center;
        border: none!important;
    }
    table td{
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }
    table td:last-child{
        border-right: none;
    }
    .divs{display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        box-sizing: border-box;
    }

    #progress{
        width: 300px;
        height: 20px;
        background-color:#f7f7f7;
        box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
        border-radius:4px;
        background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);
    }

    .finish{
        float:left;
        border-radius: 10px;
        background-color: #149bdf;
        background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
        background-size:40px 40px;
        display: inline-block;
        height: 20px;
    }
</style>
<div class="layui-card">
    <div class="layui-card-header layuiadmin-card-header-auto">
        <h2>修改课程</h2>
    </div>
    <div class="layui-card-body">
        <form class="layui-form" action="{:__url('mall.net/edit')}" method="post" >
            <input type="hidden" name="id" value="{$row.id}">
            <div class="layui-form-item" >
                <label for="" class="layui-form-label">分类</label>
                <div class="layui-input-inline" style="width: 300px">
                    <select name="category_id">
                        <option value="0"></option>

                        {foreach $data as $v}
                        <option value="{$v.id}" {if isset($row.category_id)&&$row.category_id==$v.id}selected{/if}>{$v.name}</option>
                        {if isset($v.childs) && !empty($v.childs)}
                        {foreach $v.childs as $vv}
                        <option value="{$vv.id}" {if isset($row.category_id)&&$row.category_id==$vv.id}selected{/if} >&nbsp;&nbsp;&nbsp;┗━━{$vv.name}</option>
                        {if isset($vv.childs) && !empty($vv.childs)}
                        {foreach $vv.childs as $vvv}
                        <option value="{$vvv.id}" {if isset($row.category_id)&&$row.category_id==$vvv.id}selected{/if} >
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┗━━{$vvv.name}</option>
                        {/foreach}
                        {/if}
                        {/foreach}
                        {/if]
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">标签</label>
                <div class="layui-input-block">
                    {foreach $tags as $v}
                    <input type="checkbox" name="tags[]"  {if  in_array($v.id,$row.tags)}checked{/if}  value="{$v.id}" title="{$v.name}">
                    {/foreach}
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">课程标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="title" value="{$row.title}" lay-verify="required" placeholder="请输入课程标题" class="layui-input" >
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">点击量</label>
                <div class="layui-input-block">
                    <input type="number" name="click" value="{$row.click}" placeholder="请输入点击量" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">支付类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="pay_type"  lay-filter="raQT" value="0" title="通用支付" {if $row.pay_type==0} checked {/if} >
                    <input type="radio" name="pay_type"  lay-filter="raQT" value="1" title="普通支付" {if $row.pay_type==1} checked {/if} >
                    <input type="radio" name="pay_type" lay-filter="raQT" value="2" title="积分兑换"  {if $row.pay_type==2} checked {/if} >
                </div>
            </div>
            <div class="layui-form-item " id="jf">
                <label for="" class="layui-form-label">积分数</label>
                <div class="layui-input-block">
                    <input type="number" name="integral" value="{$row.integral}" placeholder="请输入积分数 " class="layui-input" >
                </div>
            </div>
<span id="jq">
<div class="layui-form-item">
    <label for="" class="layui-form-label">单价</label>
    <div class="layui-input-block">
        <input type="text" name="price" value="{$row.price}" placeholder="请输入单价" class="layui-input" >
    </div>
</div>
</span>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">课程状态</label>
                <div class="layui-input-inline">
                    <input type="radio" name="state" value="0" title="更新中" {if $row.state==0} checked {/if} >
                    <input type="radio" name="state" value="1" title="已完结" {if $row.state==1} checked {/if} >
                </div>
            </div>
            <!-- 不同课程展示不同 -->

            <!-- 不同课程展示不同 -->

            <!-- 修改后的课程目录 -->

            <div class="layui-upload" style="margin: 20px 0;">
                <label class="layui-form-label">课程目录</label>

                <button type="button" class="layui-btn" id="attribute"><i class="layui-icon"></i>添加目录</button>
                <table class="attribute" style="margin-top: 10px;margin-left: 110px;">
                    <tr class="atr">
                        <th style="width: 200px;">目录名称</th>
                        <th class="ath">序号</th>
                        <!-- <th style="width: 100px;">商品价格</th> -->
                        <th class="ath" style="width: 200px;border-right: 1px solid #e6e6e6">视频文件</th>

                        <th style="width: 80px;">操作</th>
                    </tr>


                    {foreach $row.items as $k=>$v}
                    <tr>
                        <td>
                            <input type="hidden" name="attr_id[]" value="{$v.id}">
                            <input type='text' name='work[]' placeholder='目录名称'
                                   class='layui-input sl' value="{$v.work}">
                        </td>
                        <td>
                            <input type='number' name='sort[]' placeholder='序号' class='layui-input' style='min-width: 50px;display: inline-block' value="{$v.sort}">
                        </td>
                        <td align="center">
                            <div class="layui-upload divs" style="max-width: 600px;">


                                <p id="progress">
                                    <span  class="finish" style="width: 0%;" progress="0"></span>
                                </p>

                                <input type='file'  style='max-width: 300px;' value='选择视频'>
                                <input type='button' class='layui-btn' onclick='asd(this)' value='确认上传'>
                                <input type='hidden' class="video" name='video[]' value='{$v.video}'  lay-verify='required'  placeholder='请上传视频'>
                                <video class="video" src="{$v.video}" width='100' height='50'controls autobuffer></video>
                            </div>
                        </td>

                        <td style="text-align: center">
                            <a href='javascript:;'class='layui-btn layui-btn-xs layui-btn-primary delete'  style='margin-right: 0;font-size:12px;'><span><i class='layui-icon'></i></span></a>
                        </td>
                    </tr>
                    {/foreach}


                </table>
            </div>
            <!-- 修改后的课程目录 -->

            <div class="layui-form-item">
                <label for="" class="layui-form-label">主图</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-sm uploadPic"><i class="layui-icon">&#xe67c;</i>图片上传</button>
                        <div class="layui-upload-list" >
                            <ul class="layui-upload-box layui-clear">
                                <li><img style="width:100px;height:60px" src="{$row.thumb}" /></li>
                            </ul>
                            <input type="hidden" name="thumb" class="layui-upload-input" value="{$row.thumb}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-upload">
                <label class="layui-form-label">课程轮播图</label>
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <span style="color: #FFB800">（图片尺寸：375px * 370px）</span>
                <blockquote class="layui-elem-quote layui-quote-nm " style="margin-top: 10px;margin-left: 110px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2">
                        {foreach $row.image as $v}
                        <li class="item_img"><div class="operate"></i><i  class="close layui-icon"></i></div>
                            <img src="{$v}" class="layui-upload-img" width="60">
                            <input type="hidden" name="image[]" value="{$v}">
                        </li>
                        {/foreach}
                    </div>
                </blockquote>
            </div>


            <div class="layui-form-item">
                <label for="" class="layui-form-label">课程简介</label>
                <div class="layui-input-block">
                    <script id="container" name="content" type="text/plain" style="width: 1000px;">{$row.content|raw}
        </script>
                </div>
            </div>

        </form>
    </div>
</div>
{include file='public/footer' /}
<script type="text/javascript">
    /*var fileForm = document.getElementById("file");
     // var stopBtn = document.getElementById('stop');


     fileForm.onchange = function(){
     upload.addFileAndSend(this);
     }*/
    var upload = new Upload();
    //视频触发函数
    function upl($e,$k){
        upload.addFileAndSend($e,$k);
    }
    /* stopBtn.onclick = function(){
     this.value = "停止中";
     upload.stop();
     this.value = "已停止";
     }*/

    function Upload(){
        var xhr = new XMLHttpRequest();
        var form_data = new FormData();
        const LENGTH = 1024 * 1024 *2;
        var start = 0;
        var end = start + LENGTH;
        var blob;
        var blob_num = 1;
        var is_stop = 0

        //对外方法，传入文件对象
        this.addFileAndSend = function(that,$k){
            var file = that.files[0];
            blob = cutFile(file);
            sendFile(blob,file,that);
            blob_num  += 1;
        }

        //停止文件上传
        this.stop = function(){
            xhr.abort();
            is_stop = 1;
        }

        //切割文件
        function cutFile(file){
            var file_blob = file.slice(start,end);
            start = end;
            end = start + LENGTH;
            return file_blob;
        };

        //发送文件
        function sendFile(blob,file,that){
            var form_data = new FormData();
            var total_blob_num = Math.ceil(file.size / LENGTH);
            form_data.append('file',blob);
            form_data.append('blob_num',blob_num);
            form_data.append('total_blob_num',total_blob_num);
            form_data.append('file_name',file.name);
            xhr.open('POST','{:__url("admin/upload/upload")}',true);

            xhr.onreadystatechange  = function(){

                if (xhr.readyState==4 && xhr.status==200)//成功回调
                {

                    // console.log(JSON.parse(xhr.responseText)['status']);

                }

                var progress;

                var progressObj = $(that).siblings('p').find('.finish');


                if(total_blob_num == 1){
                    progress = '100%';

                }else{
                    progress = Math.min(100,(blob_num/total_blob_num)* 100 ) +'%';
                    // console.log(progress);
                    // console.log('分割');
                }

                //progressObj.style.width = progress;

                progressObj.css('width',progress);

                if(progress == '100%'){//上传完成
                    $data = JSON.parse(xhr.responseText);
                    layer.msg($data['msg']);
                    $(that).siblings("video").attr('src',$data['src']);
                    $(that).siblings(".video").attr('value',$data['src']);
                }
                var t = setTimeout(function(){
                    if(start < file.size && is_stop === 0){
                        blob = cutFile(file);
                        sendFile(blob,file,that);
                        blob_num  += 1;
                    }else{
                        setTimeout(t);
                    }
                },1000);
            }
            xhr.send(form_data);
        }
    }

</script>
<script>
    layui.use(['upload','layer','element','laydate','notice','form'],function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var notice = layui.notice;
        var layer = layui.layer;
        var form = layui.form;

        //日期时间选择器
        function lay(){
            notice.msg('Action in progress..', {icon: 4, close: true});
        }

        laydate.render({
            elem: '#test5'
            ,type: 'datetime',
            trigger:'click'

        });

        $('.video').click(function () {

            var src =$(this).attr('src');
            var loadstr = '<video width="800px" height="500px"  controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop">' +
                    '<source src=' +src+' type="video/mp4"></source></video>'
            layer.open({
                type: 1,
                title: '播放视频',
                area: '800px',
                content: loadstr,
            });
        })
        //普通图片上传
        $(".uploadPic").each(function (index,elem){
            upload.render({
                elem: $(elem)
                ,url: '{:__url("admin/upload/upload")}'
                ,multiple: false
                ,data:{"_token":"{{ csrf_token() }}"}
                ,done: function(res){
                    //如果上传失败
                    if(res.code == 0){
                        layer.msg(res.msg,{icon:1,time:1000},function () {
                            $(elem).parent('.layui-upload').find('.layui-upload-box').html('<li><img style="width: 100px;height:60px" src="'+res.url+'" /></li>');
                            $(elem).parent('.layui-upload').find('.layui-upload-input').val(res.url);
                        })
                    }else {
                        layer.msg(res.msg,{icon:2,time:1000})
                    }
                }
            });
        })

        //多图片上传
        upload.render({
            elem: '#test2',
            url: '{:__url("admin/upload/upload")}'
            //上传接口
            ,
            data:{"_token":"{{ csrf_token() }}"},
            multiple: false,

            before:function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
//                    $('#demo2').append()
                });
            },
            done: function (res) {
                //上传完毕
                if (res.code == 0) {
                    //console.log(111)
                    $('#demo2').append('<li class="item_img"><div class="operate"></i><i  class="close layui-icon"></i></div><img src="' + res.url + '" class="layui-upload-img" width="60"><input type="hidden" name="image[]" value="' + res.url + '"></li>');
                } else {
                    layer.msg(res.msg,{icon:2,time:1000})
                }
            }
        });
//点击多图上传的X,删除当前的图片
        $("body").on("click",".close",function(){
            $(this).closest("li").remove();
        });
        $(".uploadVideo").each(function (index,elem) {
            upload.render({
                elem: $(elem)
                ,url: '{:__url("admin/upload/upload")}'
                ,multiple: false
                ,accept: 'video' //视频
                ,data:{"_token":"{{ csrf_token() }}"}
                ,done: function(res){
                    //如果上传失败
                    if(res.code == 0){
                        layer.msg(res.msg,{icon:1,time:1000},function () {

                            $(elem).parent('.qa-xx-item').find('.layui-upload-input').val(res.url);
                        })
                    }else {
                        layer.msg(res.msg,{icon:2,time:1000})
                    }
                }
            });
        })

        // 试题类型切换事件
        form.on('radio(raQT)', function (data) {

            changeQT(data.value);
        });

        function changeQT(value, sel) {

            if (value == 2) {

                $('#jf').show();
                $('#jq').hide();
            } else if(value ==1){
                $('#jq').show();
                $('#jf').hide();
            }else{
                $('#jq').show();
                $('#jf').show();
            }
        }
        //默认加载课程分类
        $(function(){


            if($(':radio[name="type"]:checked').val() ==1){
                $('#jq').show();
                $('#jf').hide();
            } else if($(':radio[name="type"]:checked').val() ==2){
                $('#jf').show();
                $('#jq').hide();
            }else{
                $('#jq').show();
                $('#jf').show();
            }


        })

        //添加课时目录
        $('#attribute').click(function(){
            $(".attribute").append("<tr>"+"<td><input type='text' name='work[]' lay-verify='required' placeholder='目录名称' class='layui-input sl' ></td>" +
                    "<td><input type='number' name='sort[]' placeholder='序号' lay-verify='required' class='layui-input' style='min-width: 50px;display: inline-block'></td>" +

                    '<td>'+
                    '<div class="layui-upload divs" style="max-width: 600px;">'+

                    '<p id="progress">' +
                    '<span  class="finish" style="width: 0%;" progress="0"></span>'+
                    '</p>'+
                    "<input type='file' style='max-width: 300px;'  value='选择视频'>"+
                    "<input type='button' class='layui-btn' onclick='asd(this)' value='确认上传'>"+
                    "<input type='hidden' class='video' name='video[]' value=''  lay-verify='required'  placeholder='请上传视频'>"+

                    "<video width='100'  src='' height='50' controls autobuffer></video>"+


                    "</div>"+
                    '</td>'+

                    "<td style='text-align: center'><a href='javascript:;'class='layui-btn layui-btn-xs layui-btn-primary delete'  style='margin-right: 0;font-size:12px;'><span><i class='layui-icon'></i></span></a></td>"+"</tr>");

        })
        form.render('checkbox');
        $(document).on("click","span",function () {
            $(this).parents('tr').remove();
        })

        /*添加一行*/
        $('.add').click(function(){
            var html='<div class="qa-xx-item ">'+
                    '<div class="layui-inline">'+
                    '<input type="text" name="work[]" placeholder="请输入课时标题" class="layui-input layui-inline work" autocomplete="off" lay-verType="tips" lay-verify="required" required/>'+

                    '</div>'+
                    '<div class="layui-inline">'+
                    '<input type="number" name="sort[]" value="0" lay-verify="required|number" placeholder="请输入排序" class="layui-input layui-inline work1" >'+
                    '</div>'+
                    '<button type="button" class="layui-btn uploadVideo"><i class="layui-icon"></i>上传视频</button>'+

                    '<div class="layui-inline">'+
                    '<input type="text" name="video[]" class="layui-input layui-upload-input layui-inline work1" >'+
                    '</div>'+
                    '<button  type="button" class="layui-btn icon-btn add"><i class="layui-icon">&#xe654;</i>新增</button>'+
                    '<button  type="button" class="layui-btn icon-btn delone" ><i class="layui-icon"></i>删除</button>'+
                    '</div>';
            $('.kecheng').append(html);
        })
        //删除一行数据
        $("body").on("click",".delone",function(){

            $(this).parent().remove()

        })
        /*上传视频*/
        /* $("body").on("click",".uploadVideo",function(){

         upload.render({
         elem: $(this)
         ,url: '{{ route("api.upload") }}'
         ,multiple: false
         ,accept: 'video' //视频
         ,data:{"_token":"{{ csrf_token() }}"}
         ,done: function(res){
         //如果上传失败
         if(res.code == 0){
         layer.msg(res.msg,{icon:1},function () {

         $(elem).parent('.qa-xx-item').find('.layui-upload-input').val(res.url);
         })
         }else {
         layer.msg(res.msg,{icon:2})
         }
         }
         });


         });*/

    })

    function asd(a){
        var formData = new FormData();
        formData.append('file',$(a).prev()[0].files[0]);
//        path = $(a).next().attr('value');

        $.ajax({
            url: '{:__url("admin/upload/upload")}',
            dataType:'json',
            type:'POST',
            async: false,
//            data : {path:path},
            data : formData,
            processData : false, // 使数据不做处理
            contentType : false, // 不要设置Content-Type请求头
            success: function(data){
                if (data.code == 0) {
                    $(a).next().attr('value',data.url);

                    $(a).siblings("video").attr('src',data.url);

                    layer.msg('上传成功');
                }else{
                    layer.msg(data.msg);
                }

            },
            error:function(data){
                layer.msg(data.msg);
            }
        });
    }
</script>
<link href="/baidu-editor/themes/default/css/umeditor.min.css" type="text/css" rel="stylesheet">
<script src="/baidu-editor/third-party/jquery.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="/baidu-editor/umeditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/baidu-editor/umeditor.min.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UM.getEditor('container');
</script>